<template>
  <div class="select-company-dialog-container">
    <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      :title="translate(title)"
      width="860px"
      :close-on-click-modal="false"
    >
      <div class="flex_align">
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('物资类别') }}：
          </span>
          <el-input v-model="data.ItemCate" class="w164" />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('物资名称') }}：
          </span>
          <el-input v-model="data.ItemName" class="w164" />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('物资规格') }}：
          </span>
          <el-input v-model="data.ItemSpec" class="w164" />
        </div>
      </div>
      <div class="flex_align mt20">
        <div class="mr20">
          <span class="color_494949 ft12 pr5">{{ translate('单价') }}：</span>
          <el-input v-model="data.Price" class="w164" @blur="totolFn(data)" />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('库存数量') }}：
          </span>
          <el-input v-model="data.StockQty" class="w164" disabled />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">{{ translate('金额') }}：</span>
          <el-input v-model="data.Amt" class="w164" />
        </div>
      </div>
      <div class="flex_align mt20">
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('仓储管理员') }}：
          </span>
          <el-input v-model="data.WHManage" class="w164" />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('管理员电话') }}：
          </span>
          <el-input v-model="data.WHManageTel" class="w164" />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('供应厂商') }}：
          </span>
          <el-input v-model="data.SupName" class="w164" />
        </div>
      </div>
      <div class="flex_align mt20">
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('物资单位') }}：
          </span>
          <el-input v-model="data.ItemUnit" class="w164" />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">
            {{ translate('是否能用') }}：
          </span>
          <el-select
            v-model="data.StockStatus"
            class="w164"
            :placeholder="translate('请选择')"
          >
            <el-option
              v-for="item in stockArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">{{ translate('备注') }}：</span>
          <el-input v-model="data.Remark" class="w164" />
        </div>
      </div>
      <div class="flex_align mt20">
        <div class="mr20">
          <span class="color_494949 ft12 pr5">{{ translate('批次号') }}：</span>
          <el-input v-model="data.BatchNo" class="w164" />
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">{{ translate('库架层位') }}：</span>
          <el-input v-model="data.WSCode" class="w164" disabled="true"/>
        </div>
        <div class="mr20">
          <span class="color_494949 ft12 pr5">{{ translate('物资类型') }}：</span>
          <el-input v-model="data.Owner" class="w164"/>
        </div>
      </div>
      <div class="flex_align mt20">
        <div class="mr20">
          <span class="color_494949 ft12 pr5">{{ translate('上传图片') }}：</span>
          <el-upload
            ref="uploadRef"
            v-model:file-list="fileList"
            :action="action"
            :auto-upload="false"
            :before-upload="beforeUpload"
            class="upload-demo"
            drag
            :headers="headers"
            multiple
            name="fileInput"
            :on-error="uploadFilled"
            :on-success="uploadSuccessed"
            style="width: 200px; height: 200px;display: inline-flex;"
          >
          <template #trigger>
              <vab-icon
                class="add-line"
                icon="add-line"
                style="font-size: 48px"
              />
          </template>
        </el-upload>
        <file v-if="data.UniqueCode" ref="editFile" :key="componentKey" :form-id="data.UniqueCode" />
        </div>
      </div>
      <template #footer>
        <el-button @click="handleClose">{{ translate('取消') }}</el-button>
        <el-button type="primary" :disabled="isclick" @click="confirm">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref } from 'vue'
  import { translate } from '@/i18n'
  import { baseURL } from '@/config'
  import { useUserStore } from '@/store/modules/user'
  import { savestock } from '@/api/item'
  import file from '@/views/components/file'
  const { token } = useUserStore()
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '详情',
    },
    info: {
      type: Object,
      default: () => {},
    },
  })
  const dialogVisible = ref(false)
  const data: IObject = computed(() => props.info)
  const fileList = ref([])
  const action = ref(`${baseURL}/WF_Document/UploadFile`)
  const  headers = ref({ Authorization: `Bearer ${token}` })
  const uploadRef = ref('')
  const componentKey = ref(0)
  const isclick = ref(false)
  watch(
    () => props.visible,
    () => {
      dialogVisible.value = props.visible
      isclick.value = false
      if(uploadRef.value) {
         uploadRef.value.clearFiles()
      }
      if(dialogVisible.value){
        componentKey.value = componentKey.value + 1
        console.log(componentKey.value)

      }
    }
  )
  const stockArr = ref([
    {
      label: '是',
      value: '是',
    },
    {
      label: '否',
      value: '否',
    },
    {
      label: '联',
      value: '联',
    },
  ])
  const emit = defineEmits(['close', 'confirm'])
  const totolFn = (row) => {
    const total = row.StockQty * row.Price
    row.Amt = total.toFixed(2)
  }
  const handleClose = () => {
    dialogVisible.value = false
    emit('close', dialogVisible.value)
  }
  const confirm = async () => {
    isclick.value = true
    if(!props.info.UniqueCode){
      props.info.UniqueCode = getRandom()
    }
    if(fileList.value.length > 0){
      uploadRef.value.submit()
    }else {
      props.info.ModifyUserName = ''
      props.info.Field1 = ''
      props.info.imglist1 = ''
      const params = props.info
      const data = await savestock(params)
      if (data.code === '200') {
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          }
        isclick.value = false

      emit('close', dialogVisible.value)
    }
    // refs.submit()
    // dialogVisible.value = false
  }
  const S4 = () => {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  const getRandom = () => {
        return `${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`
  }
  const beforeUpload = (val) => {
        action.value = `${baseURL}/WF_Document/UploadFile?TypeName=Wms_Item&FormId=${props.info.UniqueCode}`
      }
  const uploadSuccessed = async (val) => {
       let count = 0
        if (val.code == 200) {
          count++
         console.log(count)
          if (count === fileList.value.length) {
            console.log(props.info)
            props.info.ModifyUserName = ''
            props.info.Field1 = ''
            props.info.imglist = props.info.imglist1
            const params = props.info
            const data = await savestock(params)
            if (data.code === '200') {
              ElMessage({
                message: '保存成功',
                type: 'success',
              })
            count = 0
          }
          emit('confirm')
        }

  }else {
          count = 0
    }
}
  const uploadFilled = () => {
        console.log('xx')
  }
</script>

<style lang="scss" scoped>
  .select-company-dialog-container {
    .content {
      width: 100%;
      word-break: break-all;

      pre {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        margin: 0;
      }
    }
    .flex_align {
      display: flex;
      align-items: center;
    }
    .mr20 {
      margin-right: 20px;
    }
    .w164 {
      width: 164px !important;
    }
    .mt20 {
      margin-top: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .w320 {
      width: 433px;
    }
    .color_494949 {
      width: 85px;
      display: inline-block;
      text-align: right;
    }
  }
  ::v-deep .el-upload.is-drag {
    width: 200px !important;
  }
  ::v-deep .el-upload-dragger {
    width: 200px !important;
  }
</style>
